<template>
  <div class="app-container">
    <h3>App2.vue根组件</h3>
    <!--安装和配置vue-router之后，就可以使用<router-link>组件替代普通a链接-->
    <!--<a href="#/home">首页</a>-->
    <router-link to="/home">首页</router-link>
    <!--<router-link to="/movie">电影</router-link>-->
    <!--注意1：在hash地址中，/后面的参数项叫做"路径参数"-->
    <!--在路由参“参数对象”中，需要使用this.$route.params来访问路径参数-->
    <!--注意2：在hash地址中，?后面的参数项叫做“查询参数”-->
    <!--在路由“参数对象”中，需要使用this.$route.query来访问查询参数-->
    <!--注意3：在this.$route中。path只有路径部分；fullPath时完整的地址-->
    <!--例如：
          fullPath:/movie/2?name=zs&age=20
          path:/movie/2?
    -->
    <router-link to="/movie/1">雷神</router-link>
    <router-link to="/movie/2?name=zs&age=20">洛基</router-link>
    <router-link to="/about">关于</router-link>
    <!--<a href="#/movie">电影</a>-->
    <!--<a href="#/about">关于</a>-->
    <hr/>
    <!--安装和配置vue-router之后，就可以使用<router-view>组件-->
    <!--作用：占位符-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #bfbebe;
}
a {
  margin-right: 10px;
}
</style>
